<template>
  <div>
    <div class="inquire" style="color: #fff;">
      <div id="breed">
        <div class="box select" id="box1" @click="transform('breed','box1')" style="margin-left: 5%;margin-top: 45px;" value="0">
          全部
        </div>
        <div class="box" @click="transform('breed','box2')" id="box2" style="margin-top: -50px; margin-left: 23%;" value="1">
          猫(待领养)
        </div>
        <div class="box" @click="transform('breed','box3')" id="box3" style="margin-top: -50px; margin-left: 41%;" value="2">
          猫(已领养)
        </div>
        <div class="box" @click="transform('breed','box4')" id="box4" style="margin-top: -50px; margin-left: 59%;" value="3">
          狗(待领养)
        </div>
        <div class="box" @click="transform('breed','box5')" id="box5" style="margin-top: -50px; margin-left: 77%;" value="4">
          狗(已领养)
        </div>
      </div>
      <div id="age">
        <div class="box select" @click="transform('age','box1')" id="box1" style="margin-left: 5%;margin-top: 25px;" value="0">
          全部
        </div>
        <div class="box" id="box2" @click="transform('age','box2')" style="margin-top: -50px; margin-left: 23%;" value="1">
          0-6个月
        </div>
        <div class="box" @click="transform('age','box3')" id="box3" style="margin-top: -50px; margin-left: 41%;" value="2">
          6个月-2岁
        </div>
        <div class="box" @click="transform('age','box4')" id="box4" style="margin-top: -50px; margin-left: 59%;" value="3">
          2岁-8岁
        </div>
        <div class="box" @click="transform('age','box5')" id="box5" style="margin-top: -50px; margin-left: 77%;" value="4">
          8岁以上
        </div>
      </div>
      <div id="weight">
        <div class="box select" @click="transform('weight','box1')" id="box1"  style="margin-left: 5%;margin-top: 25px;" value="0">
          全部
        </div>
        <div class="box" id="box2" @click="transform('weight','box2')" style="margin-top: -50px; margin-left: 23%;" value="1">
          小型(0-4kg)
        </div>
        <div class="box" @click="transform('weight','box3')" id="box3" style="margin-top: -50px; margin-left: 41%;" value="2">
          中型(4-10kg)
        </div>
        <div class="box" @click="transform('weight','box4')" id="box4" style="margin-top: -50px; margin-left: 59%;" value="3">
          大型(10-30kg)
        </div>
        <div class="box" @click="transform('weight','box5')" id="box5" style="margin-top: -50px; margin-left: 77%;" value="4">
          超大型(30kg以上)
        </div>
      </div>
    </div>
    <br>
    <div>
      <div class="menu-container">
        <div class="menu-card" v-for="item in animalArr" :key="item.id" @click="skipAni(item.id)">
          <div class="menu-content">
            <img :src="item.image" alt="">
            <p>{{ item.animalName }} {{ item.sex == 0 ? '雌' : '雄' }} {{ item.species }}</p>
            <p>年龄：{{ item.age }}</p>
          </div>
        </div>
      </div>
    </div>
    <br>
    <div style="margin-left: 60%;">
      <el-pagination
        :hide-on-single-page=true
        v-model:total="pages"
        :pager-count="7"
        layout="prev, pager, next"
        @current-change="getMessage()"
        v-model:current-page="form.pageNum"
      />
    </div>
    <div style="margin: auto;">
      <el-dialog v-model="dialogSubmit" title="" width="500" style="text-align: center;">
        <el-form :model="form">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="animal.animalName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="品种" :label-width="formLabelWidth">
            <el-input v-model="animal.species" autocomplete="off" password/>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-select v-model="animal.age" placeholder="选择大概年龄">
              <el-option label="0-6个月" value="0-6个月" />
              <el-option label="6个月-2岁" value="6个月-2岁" />
              <el-option label="2岁-8岁" value="2岁-8岁" />
              <el-option label="8岁以上" value="8岁以上" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-radio-group v-model="animal.sex" class="ml-4">
              <el-radio label="1" size="large">雄</el-radio>
              <el-radio label="0" size="large">雌</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              v-model="animal.introduce"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请描述一下"
            />
          </el-form-item>
          <el-form-item label="流浪" :label-width="formLabelWidth">
            <el-radio-group v-model="animal.isAdopt" class="ml-4">
              <el-radio label="0" size="large">是</el-radio>
              <el-radio label="1" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              ref="uploadRef"
              list-type="picture-card"
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              multiple
              :limit="3"
              v-model:file-list="fileList"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">
                  图片最大内存不超过2MB，数量不超过3张
                </div>
              </template>
            </el-upload>
          </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="clear()">
              清除
            </el-button>
            <el-button type="primary" @click="getAnimal()">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <button @click="dialogSubmit = true" id="popopButton">联系我们</button>
  </div>
</template>

<script setup>
import axios from '../utils/axios'
import {ref,onMounted,reactive} from 'vue'
import {Edit,UploadFilled,Plus} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
let router = useRouter()
let dialogSubmit = ref(false)
let imgFiles = ref([])
let pages = ref(1)
const uploadRef = ref()
const form = reactive({
  breed: 0,
  age: 0,
  weight: 0,
  pageNum: 1
})
const animal = reactive({
  animalName: '',
  age: '',
  species: '',
  sex: '1',
  introduce: '',
  isAdopt: '0',
})
onMounted(() => {
  getMessage()
})
const animalArr = ref([])
function transform(name1,name2){
  document.querySelector(`#${name1} .select`).classList.remove('select')
  const a =  document.querySelector(`#${name1} #${name2}`).classList.add('select')
  if(name1 === 'breed'){
    form.breed = parseInt(document.querySelector(`#${name1} #${name2}`).getAttribute("value"))
  }
  else if(name1 === 'age'){
    form.age = parseInt(document.querySelector(`#${name1} #${name2}`).getAttribute("value"))
  }
  else{
    form.weight = parseInt(document.querySelector(`#${name1} #${name2}`).getAttribute("value"))
  }
  getMessage()
}
async function getMessage(){
  const {data} = await axios.post('retrieve',form,{
    headers:{
      'Content-Type' : 'multipart/form-data'
    }
  })
  animalArr.value = data.data.records
  pages.value = parseInt(data.data.pages) * 10
}
function clear(){
  animal.animalName = ''
  animal.introduce = ''
  animal.isAdopt = '0',
  animal.age = '',
  animal.sex = '1',
  animal.species = ''
  imgFiles.value = []
  uploadRef.value.clearFiles()
}
async function getAnimal(){

  uploadRef.value.submit()
  let formData=new FormData();
  for(const file of imgFiles.value){
    formData.append('file',file)
  }
  formData.append('animal',JSON.stringify(animal))
  if(!(animal.animalName && animal.introduce && animal.age && animal.species)){
    ElMessage({
      message:'请完善信息',
      type: 'error',
      center: true,
      duration: 1000
    })
    return
  }
  const data = await axios.post('animalload',formData,{
    headers:{
      'Content-Type' : 'multipart/form-data'
    }
  })

  if(data){
    ElMessage({
      message:'发布成功',
      type: 'success',
      center: true,
      duration: 1000
    })
    setTimeout(() => {
      dialogSubmit.value = false
      getMessage()
      clear()
    },1000)
  }
  else{
    ElMessage({
      message:'发布失败',
      type: 'error',
      center: true,
      duration: 1000
    })
  }
}
function handleBeforeUpload(file){
  imgFiles.value.push(file)
  return false
}
function skipAni(id){
  router.push({name:"ani",params:{id:id}})
}
</script>

<style scoped>
.inquire{
  margin-left: 15%;
  width: 70%;
  height: 300px;
  border: 1px solid black;
}
.box{
  width: 14%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.select{
  border: 1px solid blue;
  color: blue;
}
.show{
  margin-left: 15%;
  width: 70%;
  height: 500px;
  border: 1px solid black;
  background-color: #f0f9eb;
}
.show li{
  display:inline-block;
  width: 15%;
  margin-left: 4.1%;
  
}
.subscript{
  border: 1px solid black;
}
#popopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px;
  background-color: #ff7f50;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.menu-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  width: 70%;
  margin-left: 15%;
}
 
.menu-card {
  width: 23%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s;
}
.menu-content {
  padding: 20px;
}
.menu-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #e27d60;
}
 
.menu-content p {
  font-size: 14px;
  color: #7f7f7f;
  margin-bottom: 20px;
}
 
.menu-content a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #e27d60;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
 
.menu-content a:hover {
  background-color: #bf6043;
}
.menu-card:hover {
  transform: translateY(-5px);
}
</style>